<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="ui/easyui/themes/default/easyui.css" />
<link rel="stylesheet" href="ui/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script src="ui/easyui/jquery.easyui.min.js"></script>
<script charset="utf-8" src="scripts/vendor/mustache.js"></script>
<script charset="utf-8" src="scripts/vendor/Moment.min.js"></script>
<script charset="utf-8" src="scripts/vendor/jquery.form.js"></script>
<script charset="utf-8" src="scripts/vendor/kindeditor/kindeditor-min.js"></script>
<script charset="utf-8" src="scripts/vendor/kindeditor/lang/zh_CN.js"></script>
<script charset="utf-8" src="ui/fancybox/jquery.fancybox-1.3.4.js"></script>
<style type="text/css">
#pp input{ width:30px; }
</style>
<script type="text/javascript">
var PAGENumber = 1;
var PAGESize = 6;

function split(upDate){
	if(upDate){
		return upDate.split('T')[0] + " " + upDate.split('T')[1];
	}
}

//格式化日期
function parserTimes(data){
	//转换日期的格式
	$.each(data.postReplies, function(key, val){
		data.postReplies[key].post.upDate = split(val.post.upDate);
		if(val.replies){
			$.each(val.replies, function(key1, val1){
				if(val.replies.upDate){
					val.replies[key1].upDate = val.replies.upDate.split('T')[0] + "  " + val.replies.upDate.split('T')[1];
				}
			});
		} 
	}); 
}


//ajax获取评论
function getPosted(pageNumber, pageSize){
	var postUrl = 'post/get-posted.action?tid=${param.tid}&pageNumber='+ pageNumber +'&pageSize=' + pageSize;
	var result = null;
	$.getJSON(postUrl, function(data){
		result = data;
	});
	return result;
}


//分页
function bindPage(databoo){
	$('#pp').pagination({
		total : databoo.total,
		pageSize : databoo.pageSize,
		showPageList : false,
		onSelectPage :  function(pageNumber, pageSize) {
		  var data = getPosted(pageNumber, pageSize);
		  parserTimes(data);
		  $('#postes').html(Mustache.render($('#postReplyTem').html(), data));
		}
	});
}
//回复
function reply_to_post(pid, toName, fromName,self){
	$.fancybox(Mustache.render($('#boxTem').html(), {pid:pid}));
	
	$('#commitReply').ajaxForm(function(data){
		$(self).parent().parent('li').after(Mustache.render($('#replyToTem').html(), data));
		$.fancybox.close();
	});
}

function reply_to_post2(pid, toName, fromName,self){
	$.fancybox(Mustache.render($('#boxTem').html(), {pid:pid}));
	$('#commitReply').ajaxForm(function(data){
		
		$(self).parent().parent().find('+div > .po').append(Mustache.render($('#replyToTem').html(), data));
		$.fancybox.close();
	});
}


function show_reply_btn(self){
	$(self).find("span").removeClass('hide');
}

function hidden_reply_btn(self){
	$(self).find("span").addClass('hide');
}



//在线编辑器
var editor;
KindEditor.ready(function(K) {
        editor = K.create('#post', {
        	uploadJson : 'file/file-upload.action',
        	fileManagerJson : 'file/file-manager.action',
        	allowImageUpload : true,
        	filterMode : true,
        	width : '700px',
        	items : [
						'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
						'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
						'insertunorderedlist', '|', 'emoticons', 'image', 'link']
        });
});


//jquery
$(function(){
	$.ajaxSettings.async = false;
	$.getJSON('post/get-posted.action?tid=${param.tid}', function(data){
		parserTimes(data);
		$('#postes').html(Mustache.render($('#postReplyTem').html(), data));
		$('#pager').append('<div id="pp" class="span9"  ></div>');
		bindPage(data);
	});
	
	$('#submitPost').click(function(){
		editor.sync();
		$('#commitPost').trigger('submit');
	});
	
	
	//评论提交
	$('#commitPost').ajaxForm(function(data){
		$('#postes').append(Mustache.render($('#postTem').html(), data));
		editor.html("");
	});
	
	$('#homework').mouseover(function(){
		$('#receive').show();
	});
	$('#homework').mouseout(function(){
		$('#receive').hide();
	});
	
	$("#receive").click(function(){
		var url = "course/homework-receive.action?haid=<s:property value='ha.id'/>";
		$.getJSON(url,function(json){
			if(json.success){
				window.location = "course/fill-in-homework.action?tid=${param.tid}&hhid=" + json.handin.id + "&haid=" + json.haid;
			}else{
				$(this).append("接收失败");
			}
			
		})
	});
	
});//jquery end
</script>

<title><s:property value="tt.course.name"/></title>

</head>
<body>

<div class="row">
<div class="span12">
<div  class="clearfix alert alert-info">
<div class="pull-left"><a href="person/space.action?pid=<s:property value='teach.person.id'/>"><img src="<s:property value='teach.person.headPortrait'/>"/></a></div>
<div class="pull-left">
<h2><s:property value="tt.content.title"/></h2>
<p> <s:date name="tt.teachDate" format="yyyy-MM-dd" />&nbsp;&nbsp;&nbsp;<i class="icon-tags"></i><s:property value="tt.course.tag"/></p>
</div>
</div>
</div>


<div class="span12">
<s:property value="tt.content.txt" escape="false"/>
<hr/>
<div id="homework" class="clearfix">
<s:set id="homework" value="ha.content" />
<s:if test="ha.content == null">
没有作业哦!
</s:if>
<s:else>
<p><span class="label label-info">作业:</span>&nbsp;&nbsp;
<s:if test="null == handin">
<a id="receive" href="javascript:void(0);" class="btn hide" >领作业</a>
</s:if>
</p>
<div class="clearfix"><s:property value="ha.content" escape="false" default="没有安排作业哦"/></div>
</s:else>
</div>

<s:if test="null != handin">
<div>
<p>已交</p>
<div>
<s:property value="handin.content" escape="false" default="没有内容哦"/>
</div>
</div>
</s:if>
<hr/>
</div>

<!-- 评论 -->
<div id="postes" class="span9" >


</div>
<!-- 分页 -->
<div id="pager" class="span9">
</div>


<!-- 发表评论 -->
<div class="span12">
<form id="commitPost" action="post/commit-post.action">
	<p >
		<textarea  id="post" name="post.content" ></textarea>
	</p>
	<input name="tid" value="${param.tid }" type="hidden" />
</form>
<button id="submitPost" class="btn">确定</button>
</div>


</div><!-- row end -->
<script id="replyToTem" type="text/template">
<li class="reply"  onmouseout="hidden_reply_btn(this)" onmouseover="show_reply_btn(this);"  style="color:#F60;">
{{reply.content}} &nbsp;&nbsp; (by&nbsp; {{reply.who.showName}}  &nbsp; {{reply.upDate}})
<span class="hide"><a href="javascript:void(0);" onclick="reply_to_post({{pid}},'{{reply.who.showName}}','{{cPerson.showName}}',this);">回复</a></span>
</li>
</script>

<script id="boxTem" type="text/template">
<div id="r{{pid}}">
<form id="commitReply" action="post/commit-reply.action">
<textarea name="reply.content"></textarea>
<input name="pid" value="{{pid}}" type="hidden" />
<p><button class="btn" type="submit">发表评论</button></p>
</form>
</div>
</script>

<script id="postReplyTem" type="text/template">
{{#postReplies}}
<div class="clearfix">
{{#post}}

 <div>
  
  <p><a href="person/space.action?pid={{who.id}}">{{who.showName}}</a>  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  {{upDate}}
  </p>
  
  <p>{{&content}}</p>
  
  <p>
  <a onclick="reply_to_post2({{id}},'{{post.who.showName}}','{{cPerson.showName}}',this)" href="javascript:void(0);">回复</a>
  </p>
</div>
{{/post}}

<div class="span7">
 <ul  class="po">
 {{#replies}}
	<li class="reply"  onmouseout="hidden_reply_btn(this)" onmouseover="show_reply_btn(this);"  style="color:#F60;">
		{{content}} &nbsp;&nbsp; (by&nbsp; {{who.showName}}  &nbsp; {{upDate}})
		<span class="hide"><a href="javascript:void(0);" onclick="reply_to_post({{post.id}},'{{post.who.showName}}','{{cPerson.showName}}',this);">回复</a></span>
	</li>
 {{/replies}}
 </ul>
</div>

</div>
<hr/>
{{/postReplies}}
</script>


<script id="postTem" type="text/template">
{{#posteds}}
<div class="clearfix">
<div>
  <p><a href="person/space.action?pid={{who.id}}">{{who.showName}}</a>  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  {{upDate}}
  </p>
  
  <p>{{&content}}</p>
  
  <p>
  <a href="javascript:void(0);" onclick="reply_to_post2({{id}},'{{who.showName}}','{{cPerson.showName}}',this)">回复</a>
  </p>
</div>
<div>
<ul class="po"></ul>
</div>
</div>
<hr/>
{{/posteds}}
</script>

</body>
</html>